{layout name="layout" /}
<h4 class="h4">后台管理系统主页
</h4>
<table class="table table-hover table-warning" valign="button" id="list-table">
    <thead>
        <tr>
            <th scope="col" style="width:10%; ">编号</th>
            <th scope="co1" style="width:20%">照片</th>
            <th scope="co1" style="width:15%">姓名</th>
            <th scope="co1" style="width:30%">住址</th>
            <th scope="co1" style="width:25%">操作</th>
        </tr>
    </thead>
    <tbody>
        {foreach key="k" name="data" item="value"}
            <tr class="" valign="middle">
                <th scope="row">{$k+1}</th>
                <td><img src="{$value.url}" height="60px"></td>
                <td>{$value.name}</td>
                <td>{$value.city}</td>
                <td>
                    <a class="btn btn-primary btn-lg" href="addmsg?id={$value.id}">允许</a>
                    <button type="button" class="btn btn-primary btn-lg myModals" data-toggle="modal"
                        sid={$value.id}>查看详情</button>
                    <!--  data-target="#exampleModalCenter" data-target="#myModal" -->
                </td>
            </tr>
        {/foreach}
    </tbody>
</table>

<!-- Modal -->
<div id="tc">
    
</div>
<style>
    #list-table tbody tr td,
    #list-table tbody tr th {
        vertical-align: baseline;
    }

    .modal {
        top: 50px;
    }

    .modal-footer-my {
        display: flex;
        justify-content: center;

    }

    .tc-head {
        display: flex;
        justify-content: space-around;
        height: 50px;

    }

    #tc .list-group-item {
        border: none;
        padding-left: 50px;
       
    }
</style>
<script>
    (function () {
        $('.myModals').on('click', function (event, id) {
            var id = $(this).attr('sid');
            $.ajax({
                type: 'GET',
                url: 'userinfo.html?id=' + id,
                dataType: 'json',
                success: data => {
                    var html=`
                            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <div class="tc-head">
                                                
                                                <div style="margin-top: 7%;">
                                                    <span class="text-info">姓名: ${data.username}</span>
                                                    <span class="text-info" style="margin-left: 40px">性别: ${data.sex}</span>
                                                    <span class="text-info" style="margin-left: 40px">住址: ${data.city}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-body ">
                                            <div style="text-align: center;">
                                                证件照：<img src="${data.url}" style="width:100px; height:100px" />
                                                <span style="margin-left: 40px">存照 :<img src="${data.url1}" style="width:100px; height:100px;" /></span>
                                            </div>
                                        
                                            <ul class="list-group" style="margin-top:20px;">
                                                <li class="list-group-item">
                                                    <span>电话号码:</span>
                                                    <span>${data.photo}</span>
                                                </li>
                                                <li class="list-group-item">
                                                    <span>身份证号码:</span>
                                                    <span>${data.cardnumber}</span>
                                                </li>
                                                <li class="list-group-item">
                                                    <span>电子邮箱:</span>
                                                    <span>${data.email}</span>
                                                </li>
                                            </ul>
                                        
                                            <div class="" style="font-size: 12px;text-indent:2em; width: 560px;">
                                                ${data.desc}
                                            </div>
                                        </div>
                                        <div class="modal-footer modal-footer-my">
                                            <button type="button" class="btn btn-secondary " data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    `;
                    $('#tc').html(html);
                    $('#exampleModalCenter').modal();
                },
                error: err => {
                    alert("获取数据失败");
                }
            });
        });
    })();
</script>
